import React, {useState} from 'react';
import {Form, Input, message, Modal} from 'antd';
import {http} from 'libs';
import store from './store';

export default function IForm() {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  function handleSubmit() {
    setLoading(true);
    const formData = form.getFieldsValue();
    http.post('/api/user/', {...store.record, ...formData})
      .then(() => {
        message.success('操作成功');
        store.set('pwdFormVisible', false);
        store.fetchRecords()
      })
      .finally(() => setLoading(false))
  }

  return (
    <Modal
      open
      maskClosable={false}
      title='重置密码'
      onCancel={store.vSet('pwdFormVisible', false)}
      confirmLoading={loading}
      onOk={handleSubmit}>
      <Form autoComplete='off' form={form} initialValues={store.record} labelCol={{span: 6}} wrapperCol={{span: 14}}>
        <Form.Item label="登录名">
          {store.record.username}
        </Form.Item>
        <Form.Item label="姓名">
          {store.record.nickname}
        </Form.Item>
        <Form.Item required name="password" label="新密码">
          <Input.Password type="password" placeholder="请输入新密码" autoComplete="new-password"/>
        </Form.Item>
      </Form>
    </Modal>
  )
}